<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding: 25px;">
      <div slot="header" class="title" >
        <span>完善资料</span>
      </div>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24, sm: 24 } : { span: 24 }">
          <el-card shadow="never" body-style="padding: 0;">
            <el-tabs v-model="active" class="user-info-tabs" >
              <el-tab-pane label="个人申请" name="info" v-if="form.type == 0 || form.type == 1" >
                <el-form
                  ref="form1"
                  :model="form"
                  :rules="rules"
                  label-position="top"
                  label-width="130px"
                  style="padding: 34px 20px 0 20px"
                  @keyup.enter.native="save"
                  @submit.native.prevent
                >
                  <el-row :gutter="15">
                    <el-col :sm="6">
                      <el-row :gutter="15">
                        <el-col :sm="8">
                          <el-form-item label="头像" prop="avatar">
                            <div class="ele-image-upload-list">
                              <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','avatar','头像')">
                                <div>
                                  <div tabindex="0" class="el-upload el-upload--text">
                                    <div class="el-upload-dragger">
                                      <i class="el-icon-plus ele-image-upload-icon"></i>
                                    </div>
                                    <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.avatar!=''">
                                      <div class="el-image" >
                                        <img :src="form.avatar" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                                      </div>
                                      <div class="ele-image-upload-close" @click="handleRemove('avatar')"><i class="el-icon-close"></i></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                          <el-form-item label="身份证正面" prop="id_card_front">
                            <div class="ele-image-upload-list">
                              <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','id_card_front','身份证正面')">
                                <div>
                                  <div tabindex="0" class="el-upload el-upload--text">
                                    <div class="el-upload-dragger">
                                      <i class="el-icon-plus ele-image-upload-icon"></i>
                                    </div>
                                    <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.id_card_front!=''">
                                      <div class="el-image" >
                                        <img :src="form.id_card_front" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                                      </div>
                                      <div class="ele-image-upload-close" @click="handleRemove('id_card_front')"><i class="el-icon-close"></i></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                          <el-form-item label="身份证反面" prop="id_card_verso">
                            <div class="ele-image-upload-list">
                              <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','id_card_verso','身份证反面')">
                                <div>
                                  <div tabindex="0" class="el-upload el-upload--text">
                                    <div class="el-upload-dragger">
                                      <i class="el-icon-plus ele-image-upload-icon"></i>
                                    </div>
                                    <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.id_card_verso!=''">
                                      <div class="el-image" >
                                        <img :src="form.id_card_verso" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                                      </div>
                                      <div class="ele-image-upload-close" @click="handleRemove('id_card_verso')"><i class="el-icon-close"></i></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :sm="8">
                      <el-form-item label="名称:" prop="name">
                        <el-input
                        v-model="form.name"
                        placeholder="请输入名称"
                        clearable
                        />
                      </el-form-item>
                      <el-form-item label="身份证号码:" prop="id_card_no">
                        <el-input
                        v-model="form.id_card_no"
                        placeholder="请输入身份证号码"
                        clearable
                        />
                      </el-form-item>
                      <el-form-item label="身份证姓名:" prop="id_card_name">
                        <el-input
                        v-model="form.id_card_name"
                        placeholder="请输入身份证姓名"
                        clearable
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :sm="8">
                      <el-form-item label="身份证省市区:" prop="id_card_address">
                        <regions-select
                          valueField="label"
                          v-model="form.id_card_address"
                          placeholder="请选择省市区"
                          class="ele-fluid"
                        />
                      </el-form-item>
                      <el-form-item label="身份证详细地址:" prop="id_card_detail">
                        <el-input
                        v-model="form.id_card_detail"
                        placeholder="请输入身份证详细地址"
                        clearable
                        />
                      </el-form-item>
                      
                    </el-col>
                  </el-row>

                  <div class="ele-bottom-tool" v-if="form.is_status != 1 && form.is_status != 2" >
                    <div v-if="form.is_status == 3 && form.refuse" class="ele-text-danger">
                      <i class="el-icon-circle-close"></i>
                      <span>{{ form.refuse }}</span>
                    </div>
                   
                    <div class="ele-bottom-tool-actions">
                      <el-form-item prop="agree">
                        <el-checkbox
                          style="font-size: 12px"
                          v-model="agree"
                          label="阅读并同意"
                        >
                          <span>阅读并同意<span class="text-blue"  @click="openDialog(accountSet)">《{{accountSet.protocol_name}}》</span></span>
                        </el-checkbox>
                      </el-form-item>
                      <el-button type="primary" :loading="loading" @click="save(1)">
                        提交
                      </el-button>
                    </div>
                  </div>
                  
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="企业申请" name="company" v-if="form.type == 0 || form.type == 2">
                <el-form
                  ref="form2"
                  :model="form"
                  :rules="rules"
                  label-position="top"
                  label-width="130px"
                  style="padding: 34px 20px 0 20px"
                  @keyup.enter.native="save"
                  @submit.native.prevent
                >
                  <el-row :gutter="15">
                    <el-col :sm="6">
                      <el-row :gutter="15">
                        <el-col :sm="12">
                          <el-form-item label="LOGO" prop="avatar">
                            <div class="ele-image-upload-list">
                              <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','logo','LOGO')">
                                <div>
                                  <div tabindex="0" class="el-upload el-upload--text">
                                    <div class="el-upload-dragger">
                                      <i class="el-icon-plus ele-image-upload-icon"></i>
                                    </div>
                                    <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.avatar!=''">
                                      <div class="el-image" >
                                        <img :src="form.avatar" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                                      </div>
                                      <div class="ele-image-upload-close" @click="handleRemove('avatar')"><i class="el-icon-close"></i></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :sm="12">
                          <el-form-item label="营业执照" prop="business_license">
                            <div class="ele-image-upload-list">
                              <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','business_license','营业执照')">
                                <div>
                                  <div tabindex="0" class="el-upload el-upload--text">
                                    <div class="el-upload-dragger">
                                      <i class="el-icon-plus ele-image-upload-icon"></i>
                                    </div>
                                    <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.business_license!=''">
                                      <div class="el-image" >
                                        <img :src="form.business_license" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                                      </div>
                                      <div class="ele-image-upload-close" @click="handleRemove('business_license')"><i class="el-icon-close"></i></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :sm="6">
                      <el-form-item label="企业名称:" prop="company_name">
                        <el-input
                        v-model="form.company_name"
                        placeholder="请输入企业名称"
                        clearable
                        />
                      </el-form-item>
                      <el-form-item label="营业执照编号:" prop="business_no">
                        <el-input
                        v-model="form.business_no"
                        placeholder="请输入营业执照编号"
                        clearable
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :sm="6">
                      <el-form-item label="企业联系人名称:" prop="contact_name">
                        <el-input
                        v-model="form.contact_name"
                        placeholder="请输入企业联系人名称"
                        clearable
                        />
                      </el-form-item>
                      <el-form-item label="企业联系人电话:" prop="contact_phone">
                        <el-input
                        v-model="form.contact_phone"
                        placeholder="请输入企业联系人电话"
                        clearable
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :sm="6">
                      <el-form-item label="企业省市区:" prop="company_address">
                        <regions-select
                          valueField="label"
                          v-model="form.company_address"
                          placeholder="请选择企业省市区"
                          class="ele-fluid"
                        />
                      </el-form-item>
                      <el-form-item label="企业详细地址:" prop="company_detail">
                        <el-input
                        v-model="form.company_detail"
                        placeholder="请输入企业详细地址"
                        clearable
                        />
                      </el-form-item>
                      
                    </el-col>
                  </el-row>
                  <div class="ele-bottom-tool" v-if="form.is_status != 1 && form.is_status != 2" >
                    <div v-if="form.is_status == 3 && form.refuse" class="ele-text-danger">
                      <i class="el-icon-circle-close"></i>
                      <span>{{ form.refuse }}</span>
                    </div>
                    <div class="ele-bottom-tool-actions">
                      <el-form-item prop="agree">
                        <el-checkbox
                          style="font-size: 12px"
                          v-model="agree"
                          label="阅读并同意"
                        >
                          <span>阅读并同意<span class="text-blue"  @click="openDialog(accountSet)">《{{accountSet.protocol_name}}》</span></span>
                        </el-checkbox>
                      </el-form-item>
                      <el-button type="primary" :loading="loading" @click="save(2)">
                        提交
                      </el-button>
                    </div>
                  </div>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </el-card> 

    <fullTextSearchDialog
      v-if="lawDialogVisible"
      ref="fullTextSearchDialog"
      :curTitle="curTitle"
      :content="lawFullText"
      @close="closeDialog"
    />


    <uploadPictures
      :isChoice="isChoice"
      :visible.sync="modalPic"
      @getPic="getPic"
      :gridBtn="gridBtn"
      :gridPic="gridPic"
      :title="modalTitle"
    ></uploadPictures>

    
   
  </div>
</template>

<script>
  import fullTextSearchDialog from "@/views/dialog/fullTextSearchDialog.vue";
  import uploadPictures from "@/components/uploadPictures";
  import EleCropperDialog from 'ele-admin/es/ele-cropper-dialog';
  import RegionsSelect from '@/components/RegionsSelect/index.vue';
  import { infoDetail,infoEdit } from '@/api/account/list';
  import { query  } from '@/api/account/set';


  export default {
    name: 'UserProfile',
    components: { uploadPictures,EleCropperDialog,RegionsSelect,fullTextSearchDialog },
    data() {
      return {
        lawDialogVisible: false,
        curTitle: '',
        lawFullText: '',
        modalTitle:'',
        modalPic: false,
        isChoice: "单选",
        gridBtn: {
          xl: 4,
          lg: 8,
          md: 8,
          sm: 8,
          xs: 8,
        },
        gridPic: {
          xl: 6,
          lg: 8,
          md: 12,
          sm: 12,
          xs: 12,
        },
        // tab页选中
        active: 'info',
        // 表单数据
        form: {
          type:0,
          avatar: '',
          name: '',
          id_card_no: '',
          id_card_name: '',
          id_card_front: '',
          id_card_verso: '',
          id_card_address: [],
          id_card_detail: '',
          logo: '',
          company_name: '',
          business_no: '',
          business_license: '',
          contact_name: '',
          contact_phone: '',
          company_address:  [],
          company_detail: '',
          is_status :0,
          refuse:'',
         
        },
        agree:[],
        accountSet:[],
        // 表单验证规则
        rules: {
          avatar: [
            {
              required: true,
              message: '请上传头像',
              trigger: 'blur'
            }
          ],
          name: [
            {
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            }
          ],
          id_card_no: [
            {
              required: true,
              message: '请输入身份证号码',
              trigger: 'blur'
            }
          ],
          id_card_name: [
            {
              required: true,
              message: '请输入身份证名称',
              trigger: 'blur'
            }
          ],
          id_card_front: [
            {
              required: true,
              message: '请上传身份证正面',
              trigger: 'blur'
            }
          ],
          id_card_verso: [
            {
              required: true,
              message: '请上传身份证反面',
              trigger: 'blur'
            }
          ],
          id_card_address: [
            {
              required: true,
              message: '请选择省市区',
              trigger: 'blur'
            }
          ],
          id_card_detail: [
            {
              required: true,
              message: '请输入详细地址',
              trigger: 'blur'
            }
          ],
          logo: [
            {
              required: true,
              message: '请上传LOGO',
              trigger: 'blur'
            }
          ],
          business_license: [
            {
              required: true,
              message: '请上传营业执照',
              trigger: 'blur'
            }
          ],
          company_name:[
            {
              required: true,
              message: '请输入企业名称',
              trigger: 'blur'
            }
          ],
          business_no:[
            {
              required: true,
              message: '请输入营业执照编号',
              trigger: 'blur'
            }
          ],
          contact_name:[
            {
              required: true,
              message: '请输入联系人名称',
              trigger: 'blur'
            }
          ],
          contact_phone:[
            {
              required: true,
              message: '请输入联系人电话',
              trigger: 'blur'
            }
          ],
        },
        // 保存按钮loading
        loading: false,
        // 是否显示裁剪弹窗
        visible: false
      };
    },
    computed: {
      // 登录用户信息
      loginUser() {
        return this.$store.state.user.info;
      },
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    
    methods: {
     
      // 打开法律法规全文
      openDialog(item) {
        this.curTitle = item.protocol_name;
        this.lawFullText = item.protocol;
        this.lawDialogVisible = true
        setTimeout(() => {
          this.$refs.fullTextSearchDialog.openDialog()
        }, 0)
      },
      // 关闭全文弹窗
      closeDialog() {
        this.curTitle = '';
        this.lawFullText = ''
        this.lawDialogVisible = false
      },
      // 选择图片
      modalPicTap(tit, picTit,openTitle) {
        this.modalTitle = openTitle;
        this.isChoice = tit === "dan" ? "单选" : "多选";
        this.picTit = picTit;
        this.modalPic = true;
      },
      // 选中图片
      getPic(pc) {
        switch (this.picTit) {
          case "id_card_front":
            this.form.id_card_front = pc.satt_dir;
            break;
          case "id_card_verso":
            this.form.id_card_verso = pc.satt_dir;
            break;
          case "avatar":
            this.form.avatar = pc.satt_dir;
            break;
          case "logo":
            this.form.avatar = pc.satt_dir;
            break;
          case "business_license":
            this.form.business_license = pc.satt_dir;
            break;
        }        
        this.modalPic = false;
      },
      //删除图片
      handleRemove(field) {
        this.form[field] = '';
      },
      /* 保存更改 */
      save(type) {

        if(this.form.avatar == ''){
          type == 1 ? this.$message.error('请上传头像') : this.$message.error('请上传LOGO');
          return false;
        }

        if(type == 1 && (this.form.id_card_front == '' || this.form.id_card_verso == '')){
          this.$message.error('请上传身份证');
          return false;
        }

        if(type == 2 && this.form.business_license == ''){
          this.$message.error('请上传营业执照');
          return false;
        }

        if(this.agree.length == 0){
          this.$message.error('请阅读并同意协议');
          return false;
        }
        

        this.$refs['form'+type].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          const data = {
            ...this.form
          };

          data.type = type;

          infoEdit(data).then((msg) => {
            this.loading = false;
            this.$message.success(msg);
          }).catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
        });
      },
      /* 修改登录用户 */
      updateLoginUser(data) {
        this.$store.dispatch('user/setInfo', { ...this.loginUser, ...data });
      },
      dataInit(){
        infoDetail().then((data) => {
          if(data != null){
            this.$util.assignObject(this.form, {
              ...data
            });

            if(data.type == 0 || data.type == 1 ){
              this.active  = 'info';
            }else{
              this.active  = 'company';
            }


          }
        }).catch((e) => {
          this.$message.error(e.message);
        });
      },
    }
    ,mounted() {
      this.dataInit();
      query().then((msg) => {
        if(msg != null){
          this.accountSet = msg;
        }
      })
      .catch((e) => {
        this.$message.error(e.message);
      });
    },
  };
</script>

<style lang="less" scoped>

  .text-blue{
    color: #1890ff
  }

  .el-tabs__nav { padding-left: 45%; } 
  .ele-body {
    padding-bottom: 0;
  }

  .ele-bottom-tool .ele-bottom-tool-actions {
    flex: 1;
    text-align: center;
  }

  .ele-bottom-tool{
    padding: 10px 120px;
  }

  .title {
    padding-left: 10px;
    border-left: 3px solid #0256ff;
    font-size: 15px;
    line-height: 15px;
    color: #303133;
  }

  .el-card {
    margin-bottom: 15px;
  }

  /* 用户资料卡片 */
  .user-info-card {
    padding: 8px 0;
    text-align: center;

    .user-info-avatar-group {
      position: relative;
      cursor: pointer;
      margin: 0 auto;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      overflow: hidden;

      & > i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 30px;
        display: none;
        z-index: 2;
      }

      &:hover {
        & > i {
          display: block;
        }

        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
        }
      }
    }

    .user-info-avatar {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
    }

    .user-info-name {
      font-size: 24px;
      margin-top: 20px;
    }

    .user-info-desc {
      margin-top: 8px;
    }
  }

  /* 用户信息列表 */
  .user-info-list {
    margin-top: 30px;

    .user-info-item {
      margin-bottom: 16px;
      display: flex;
      align-items: baseline;

      & > i {
        margin-right: 10px;
        font-size: 16px;
      }

      & > span {
        flex: 1;
        display: block;
      }
    }
  }

  /* 用户标签 */
  .user-info-tags .el-tag {
    margin: 10px 10px 0 0;
  }

  /* 用户账号绑定列表 */
  .user-account-list {
    padding: 16px 20px;

    .user-account-item {
      padding: 15px;

      .ele-text-secondary {
        margin-top: 6px;
      }

      .user-account-icon {
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        color: #fff;
        font-size: 26px;
        border-radius: 50%;
        background-color: #3492ed;
        box-sizing: border-box;

        &.el-icon-_wechat {
          background-color: #4daf29;
          font-size: 28px;
        }

        &.el-icon-_alipay {
          background-color: #1476fe;
          padding-left: 5px;
          font-size: 32px;
        }
      }
    }
  }

  
</style>
